<template>
    <div class="tianqi">
        <div class="top">
            <div class="left">
                <img src="@/assets/2.png" alt="">
            </div>
            <div class="right">
                <button>15天天气</button>
                <button>40天天气</button>
            </div>
        </div>
        <div class="info">
            <div v-for="item in list" :key="item.id" class="item">
                <div class="one-line">
                    <span>{{ item.riqi }}</span>
                    <span>{{ item.date }}</span>
                </div>
                <div class="two-line">
                    <img :src="item.src" alt="">
                </div>
                <div class="three-line">
                    {{ item.yunduo }}
                </div>
                <div class="four-line">
                    {{ item.wendu }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                list:[
                    {
                        id:1,
                        src:'https://tianqi-stream.2345cdn.net/tqpcimg/tianqiimg/theme4/V2Images/wea_icon/36px/icon_duoyun@2x.png',
                        date:'05/13',
                        riqi:'昨天',
                        yunduo:'多云',
                        wendu:'16°~28°'
                    },
                    {
                        id:2,
                        src:'https://tianqi-stream.2345cdn.net/tqpcimg/tianqiimg/theme4/V2Images/wea_icon/36px/icon_duoyun@2x.png',
                        date:'05/13',
                        riqi:'昨天',
                        yunduo:'多云',
                        wendu:'16°~28°'
                    },
                    {
                        id:3,
                        src:'https://tianqi-stream.2345cdn.net/tqpcimg/tianqiimg/theme4/V2Images/wea_icon/36px/icon_duoyun@2x.png',
                        date:'05/13',
                        riqi:'昨天',
                        yunduo:'多云',
                        wendu:'16°~28°'
                    },
                    {
                        id:4,
                        src:'https://tianqi-stream.2345cdn.net/tqpcimg/tianqiimg/theme4/V2Images/wea_icon/36px/icon_duoyun@2x.png',
                        date:'05/13',
                        riqi:'昨天',
                        yunduo:'多云',
                        wendu:'16°~28°'
                    },
                    {
                        id:5,
                        src:'https://tianqi-stream.2345cdn.net/tqpcimg/tianqiimg/theme4/V2Images/wea_icon/36px/icon_duoyun@2x.png',
                        date:'05/13',
                        riqi:'昨天',
                        yunduo:'多云',
                        wendu:'16°~28°'
                    },
                    {
                        id:6,
                        src:'https://tianqi-stream.2345cdn.net/tqpcimg/tianqiimg/theme4/V2Images/wea_icon/36px/icon_duoyun@2x.png',
                        date:'05/13',
                        riqi:'昨天',
                        yunduo:'多云',
                        wendu:'16°~28°'
                    },
                    {
                        id:7,
                        src:'https://tianqi-stream.2345cdn.net/tqpcimg/tianqiimg/theme4/V2Images/wea_icon/36px/icon_duoyun@2x.png',
                        date:'05/13',
                        riqi:'昨天',
                        yunduo:'多云',
                        wendu:'16°~28°'
                    },
                    {
                        id:8,
                        src:'https://tianqi-stream.2345cdn.net/tqpcimg/tianqiimg/theme4/V2Images/wea_icon/36px/icon_duoyun@2x.png',
                        date:'05/13',
                        riqi:'昨天',
                        yunduo:'多云',
                        wendu:'16°~28°'
                    }
                ]
            }
        }
    }
</script>

<style lang="scss" scoped>
.tianqi{
    width:834px;
    background-color: white;
    border-radius:20px 0 0 0;
    z-index:999;
    position:absolute;
    top:300px;
    height:500px;
    .top{
        width:100%;
        height:40px;
        display:flex;
        justify-content: space-between;
        align-items: center;
        .left{
            width:30%;
            img{
                width:246px;
                height:29px;
                margin-left:10px;
            }
        }
        .right{
            width:50%;
            display:flex;
            justify-content: end;
            button{
                border:0;
                width:108px;
                height:36px;
                background-image: linear-gradient(90deg, #3686ff 0%, #38abff 100%), linear-gradient(90deg, #fefefe 0%, #fbfbfb 100%);
                background-color: #38abff;
                border-radius: 18px;
                color: #ffffff;
                margin: 0 8px;
            }
        }
    }
    .info{
        width:100%;
        display:flex;
        height:150px;
        .item{
            width:107px;
            height:100%;
            .one-line{
                display:flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size:14px;
                color:#666666CC;
            }
            .two-line{
                width:100%;
                img{
                    height:36px;
                    width:36px;
                    margin:10px 35px;
                }
            }
            .three-line{
                width:100%;
                line-height:19px;
                font-size:14px;
                color:#666666CC;
                text-align:center;
            }
            .four-line{
                width:100%;
                line-height:27px;
                font-size:16px;
                color:#666666CC;
                text-align:center;
            }
        }
    }
}
</style>